<template>
	<view class="niceui-checkbox-button">
		<view class="scenes-list">
			<view class="scene-item" v-for="(sub,index) in items" :class="checkItems.includes(sub.time)?'active':''">
				<view class="timePageDiy1" @click="toogle(sub.time)">
					{{sub.time}}
				</view>
				<view class="timePageDiy2" @click="delDiyTime(index)">
					删除
				</view>
			</view>
			<view class="scene-item1" v-if="isOpenCustom" @click="showCustomerInputFlag = true">
				<kxTimePicker :kxTimeValue="kxTimeValue" @kxTimeFunt="kxTimeFunt"></kxTimePicker>
			</view>
		</view>
		<!-- <view class="customer-view" v-show="showCustomerInputFlag">
			<input class="uni-input" v-model="customerInput" placeholder="输入一个名称试试" />
			<view class="btn_code" style="top:36rpx">
				<button @click="addItem">确定</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import ballTable from "@/api/ballTable.js"
	import kxTimePicker from "@/components/kx-time-picker/kx-time-picker.vue"
	export default {
		components: { kxTimePicker },
		props: {
			current: {
				type: String,
				default: 0
			},

			// 是否开启自定义选项
			isOpenCustom: {
				type: Boolean,
				default: false, // 默认不开启
			},
			// 是否使用自定义样式
			isUseDefault: {
				type: Boolean,
				default: true, // 默认使用
			},
			items: {
				type: Array,
				default () {
					return [];
				},
			},
			timeInfoList: {
				type: Array,
				default () {
					return [];
				},
			},
			// 父组件v-model传参，子组件props中key为'value'接收，'input'事件更改
			value: {
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				kxTimeValue: {
					value: ''
				},
				checkItems: JSON.parse(JSON.stringify(this.value)),
				showCustomerInputFlag: false,
				customerInput: '',
				delDiyTimeData: {}
			}
		},
		created() {
			console.log(this.current, '我是星期几')
		},
		methods: {
			kxTimeFunt(obj) {
				this.kxTimeValue = obj
				this.sumbAnyTimes()
			},
			delDiyTime(index) {
				if (this.current == 0) {
					console.log(this.items, '我是自定义列表')
					let arr = this.items;
					arr.splice(index, 1)
					let time = this.items;
					time.friday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
					console.log(this.delDiyTimeData, 'this.delDiyTimeData')
				} else if (day == 'monday') {
					let arr = this.timeInfoList[1].time.monday;
					arr.splice(index, 1)
					let time = this.timeInfoList[1].time;
					time.monday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
				} else if (day == 'sunday') {
					let arr = this.timeInfoList[1].time.sunday;
					arr.splice(index, 1)
					let time = this.timeInfoList[1].time;
					time.sunday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
				} else if (day == 'tuesday') {
					let arr = this.timeInfoList[1].time.tuesday;
					arr.splice(index, 1)
					let time = this.timeInfoList[1].time;
					time.tuesday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
				} else if (day == 'saturday') {
					let arr = this.timeInfoList[1].time.saturday;
					arr.splice(index, 1)
					let time = this.timeInfoList[1].time;
					time.saturday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
				} else if (day == 'thursday') {
					let arr = this.timeInfoList[1].time.thursday;
					arr.splice(index, 1)
					let time = this.timeInfoList[1].time;
					time.thursday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
				} else if (day == 'wednesday') {
					let arr = this.timeInfoList[1].time.wednesday;
					arr.splice(index, 1)
					let time = this.timeInfoList[1].time;
					time.wednesday = arr;
					console.log(time, 'time')
					this.delDiyTimeData = {
						time_title: '自定义',
						shop_id: '18000001',
						time: JSON.stringify(time)
					}
				}
				ballTable.postTimeInfoSet(this.delDiyTimeData).then(res => {
					if (res.data.code == 200) {
						this.revokeVcrShow = false
						this.$refs.uToast.show({
							type: 'success',
							icon: false,
							message: res.data.message,
						})
						this.getTimeInfo()
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: res.data.message,
						})
					}
				})
			},
			//保存自定义时间端
			sumbAnyTimes() {
				console.log(this.items, 'timeInfoList')
				if (this.current == 0) {
					if (this.items) {
						let arr = this.items;
						arr.push({ time: this.kxTimeValue.value })
						let time = arr
						console.log(time, 'ttime')
						this.addAnyTimeData = {
							time_title: '自定义',
							shop_id: '18000001',
							time: JSON.stringify(time)
						}
						console.log(this.addAnyTimeData, 'this.addAnyTimeData')
						// } else {
						// 	let arr = this.timeInfoList[1].time;
						// 	Object.assign(arr, { 'friday': [{ 'time': this.kxTimeValue.value }] })
						// 	let time = JSON.stringify(arr);
						// 	this.addAnyTimeData = {
						// 		time_title: '自定义',
						// 		shop_id: '18000001',
						// 		time: time
						// 	}
						// }
					} else if (this.current == 1) {
						if (this.timeInfoList[1].time.monday) {
							let arr = this.timeInfoList[1].time.monday;
							arr.push({ time: this.kxTimeValue.value })
							let time = this.timeInfoList[1].time
							time.monday = arr;
							console.log(time, 'ttime')
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: JSON.stringify(time)
							}
						} else {
							let arr = this.timeInfoList[1].time;
							Object.assign(arr, { 'monday': [{ 'time': this.kxTimeValue.value }] })
							let time = JSON.stringify(arr);
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: time
							}
						}
					} else if (this.current == 2) {
						if (this.timeInfoList[1].time.sunday) {
							let arr = this.timeInfoList[1].time.sunday;
							arr.push({ time: this.kxTimeValue.value })
							let time = this.timeInfoList[1].time
							time.sunday = arr;
							console.log(time, 'ttime')
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: JSON.stringify(time)
							}
						} else {
							let arr = this.timeInfoList[1].time;
							Object.assign(arr, { 'sunday': [{ 'time': this.kxTimeValue.value }] })
							let time = JSON.stringify(arr);
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: time
							}
						}
					} else if (this.current == 3) {
						if (this.timeInfoList[1].time.tuesday) {
							let arr = this.timeInfoList[1].time.tuesday;
							arr.push({ time: this.kxTimeValue.value })
							let time = this.timeInfoList[1].time
							time.tuesday = arr;
							console.log(time, 'ttime')
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: JSON.stringify(time)
							}
						} else {
							let arr = this.timeInfoList[1].time;
							Object.assign(arr, { 'tuesday': [{ 'time': this.kxTimeValue.value }] })
							let time = JSON.stringify(arr);
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: time
							}
						}
					} else if (this.current == 4) {
						if (this.timeInfoList[1].time.saturday) {
							let arr = this.timeInfoList[1].time.saturday;
							arr.push({ time: this.kxTimeValue.value })
							let time = this.timeInfoList[1].time
							time.saturday = arr;
							console.log(time, 'ttime')
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: JSON.stringify(time)
							}
						} else {
							let arr = this.timeInfoList[1].time;
							Object.assign(arr, { 'saturday': [{ 'time': this.kxTimeValue.value }] })
							let time = JSON.stringify(arr);
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: time
							}
						}
					} else if (this.current == 5) {
						if (this.timeInfoList[1].time.thursday) {
							let arr = this.timeInfoList[1].time.thursday;
							arr.push({ time: this.kxTimeValue.value })
							let time = this.timeInfoList[1].time
							time.thursday = arr;
							console.log(time, 'ttime')
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: JSON.stringify(time)
							}
						} else {
							let arr = this.timeInfoList[1].time;
							Object.assign(arr, { 'thursday': [{ 'time': this.kxTimeValue.value }] })
							let time = JSON.stringify(arr);
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: time
							}
						}
					} else if (this.current == 6) {
						if (this.timeInfoList[1].time.wednesday) {
							let arr = this.timeInfoList[1].time.wednesday;
							arr.push({ time: this.kxTimeValue.value })
							let time = this.timeInfoList[1].time
							time.wednesday = arr;
							console.log(time, 'ttime')
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: JSON.stringify(time)
							}
						} else {
							let arr = this.timeInfoList[1].time;
							Object.assign(arr, { 'wednesday': [{ 'time': this.kxTimeValue.value }] })
							let time = JSON.stringify(arr);
							this.addAnyTimeData = {
								time_title: '自定义',
								shop_id: '18000001',
								time: time
							}
						}
					}
					console.log(this.addAnyTimeData, 'this.addAnyTimeData123')
					ballTable.postTimeInfoSet(this.addAnyTimeData).then(res => {
						if (res.data.code == 200) {
							this.revokeVcrShow = false
							this.$refs.uToast.show({
								type: 'success',
								icon: false,
								message: res.data.message,
							})
							// this.getTimeInfo()
						} else {
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								message: res.data.message,
							})
						}
					})
				}
			},
			toogle(v) {
				let arr = this.checkItems;
				let indexs = arr.indexOf(v)
				if (indexs == -1) {
					arr.push(v)
				} else {
					arr.splice(indexs, 1)
				}
				console.log(arr)
				// 无论那种模式，都需要更改并通知外层使用组件
				this.$emit("input", arr); // input事件控制v-model的数据更改
			},
			addItem() {
				if (this.customerInput) {
					let flag = false;
					this.items.filter(item => {
						if (this.customerInput == item.text) {
							flag = true;
						}
					})
					if (flag) {
						uni.showToast({
							title: this.customerInput + "已存在",
							icon: 'error'
						})
						return;
					}
					this.items.push({ text: this.customerInput, value: this.customerInput });
					this.checkItems.push(this.customerInput);
					this.showCustomerInputFlag = false
					this.customerInput = ''
				}
			},
		}
	}
</script>
<style lang="scss">
	.scenes-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.scene-item {
			margin-top: 42rpx;
			text-align: center;
			margin-right: 10rpx;
			width: 214rpx;
			height: 196rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx;
			opacity: 1;
		}

		.timePageDiy1 {
			height: 128rpx;
			line-height: 145rpx;
			border-bottom: 1rpx solid rgba(112, 112, 112, 0.5);
		}

		.timePageDiy2 {
			line-height: 60rpx;
		}

		.scene-item+.scene-item {}


	}

	.customer-view {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-input {
		border: solid 2rpx #eee;
		width: 60%;
		height: 90rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
	}

	.scene-item1 {
		width: 214rpx;
		height: 196rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin-top: 42rpx;
		text-align: center;
		line-height: 196rpx;
		margin-right: 10rpx;
		border: 1px dotted gray;
	}

	.active {
		margin-top: 42rpx;
		text-align: center;
		margin-right: 10rpx;
		width: 214rpx;
		height: 196rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		opacity: 1;
		background: #0C8D56 !important;
		color: #fff;
	}
</style>